<!--
    * Time    : 2021-03-23 14:05:51
    * Author  : yinjing
    * Desc    : 内容文章
-->

<template>
    <div class="w750">
        <div class="p-15p bg-white">
            <div class="font-20 text-333">{{ detailInfo.title }}</div>
            <div class="d-flex j-sb mt-1">
                <div class="d-flex j-center">
                    <div class="stickBox" v-if="detailInfo.topStatus">置顶</div>
                    <div class="font text-333 mr-1" v-if="pageShows.includes('4')">{{ detailInfo.author }}</div>
                    <div class="font text-999" v-if="pageShows.includes('5')">{{ detailInfo.createTime | dateformat('YYYY-MM-DD') }}</div>
                </div>
                <div class="font text-999" v-if="pageShows.includes('2')">
                    {{
                        detailInfo.glanceCounts > 10000
                            ? (detailInfo.glanceCounts - (detailInfo.glanceCounts % 1000)) / 10000 + 'W'
                            : detailInfo.glanceCounts
                    }}人阅读
                </div>
            </div>
            <!-- 标签 -->
            <div class="tagBox" v-if="pageShows.includes('3')">
                <div v-for="(item, index) in detailInfo.labels" :key="index">{{ item.labelName }}</div>
            </div>
            <div class="titleBox p-15p">
                {{ detailInfo.description }}
            </div>
						
						<!-- 图片 -->
						<div class="photoBox" v-if="detailInfo.contentType == 'PHOTO'">
						     <template v-for="(item,index) in detailInfo.contentPath">
									 <legend-image :pic="item" className="object-cover" :options="{w: 345}" :key="index" class="w-100" />
								 </template>
						</div>
						
            <!-- 视频 -->
            <div class="videoBox" v-if="detailInfo.contentType == 'VEDIO'">
                <video
                    id="video"
                    class="w-100 h-100"
                    controls="controls"
                    :poster="$imgUrlHead + detailInfo.videoPhotoPath"
                    :webkit-playsinline="true"
                    x5-video-player-type="h5-page"
                    x5-video-orientation="portraint"
                >
                    <source :src="$imgUrlHead + detailInfo.contentPath[0]" type="video/mp4" />
                </video>
            </div>
            <!-- 音频 -->
            <div class="p-1" v-if="detailInfo.contentType == 'MUSIC'">
                <!-- <audio id="audio" ref="audio" controls="controls" :src="$imgUrlHead + audioSrc" preload="preload" class="w-100" /> -->
                <aplayer :music="audioObj"></aplayer>
            </div>
            <!-- 富文本 -->
            <div class="richText mt-2" v-html="detailInfo.content"></div>
            <!-- 商品 -->
            <template>
                <div class="p-1 mt-2 bg-f5 d-flex rounded-8 mb-1" v-for="(item, index) in detailInfo.products" :key="index">
                    <div class="imgBox">
                        <legend-image :pic="item.pic" :isJD="item.prodSource == 'JD'" class="w-100 h-100" />
                        <!-- <img src="@/assets/images/haitao-small.png" class="haitao" /> -->
                    </div>
                    <div class="d-flex flex-column j-sb ml-1" style="width: 70%">
                        <div class="text-333 font-14">{{ item.name }}</div>
                        <div class="d-flex">
                            <div class="text-main">
                                <span class="font">￥</span>
                                <span class="font-18">{{ item.price }}</span>
                            </div>
                            <div
                                class="font text-white px-1 ml-1 bg-main"
                                style="line-height: 24px; border-radius: 2px"
                                v-if="detailInfo.shareSaleUser && item.supportDist && detailInfo.shareSaleFlagSetting"
                            >
                                预计佣金￥{{ item.distCommission }}
                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </div>
        <!-- 评论 -->
        <div class="bg-f8 p-1 pb-2 mb-5">
            <div class="text-333 font-14 p-15p font-weight">共{{ list.length }}条评论</div>
            <template>
                <div class="d-flex mb-2" v-for="(item, index) in list" :key="index">
                    <div class="overflow-h rounded-circle mx-1" style="width: 35px; height: 35px">
                        <img :src="$imgUrlHead + item.userImage" class="w-100 h-100" />
                    </div>
                    <div style="width: 80%">
                        <div class="font-14 text-666 line-clamp1" style="width: 140px">{{ item.userNickName }}</div>
                        <div class="font text-999 mt-02 d-flex j-sb">
                            <div>{{ item.createTime | dateformat() }}</div>
                            <div v-if="item.personal" class="text-999 font" @click="delComment(item.id)">删除</div>
                        </div>
                        <div class="font-14 text-333 mt-1">
                            {{ item.commentConent }}
                        </div>
                    </div>
                </div>
            </template>
        </div>
        <!-- 底部栏 -->
        <div class="footerBox" style="bottom: 0">
            <div>
                <div class="leftBox">
                    <!-- 点赞 -->
                    <div class="ClickLike-box position-relative" @click="updataThumb">
                        <img :src="clickLikeSrc" alt="" />
                        <div class="num text-white" style="padding: 1px 3px" v-if="pageShows.includes('1')">
                            {{ thumbTotal > 100 ? '99+' : thumbTotal }}
                        </div>
                        <div class="animate" v-show="ClickLike_Status"></div>
                    </div>
                    <!-- 评论 -->
                    <span class="icon iconfont iconliaotian1 text-white position-relative" style="font-size: 24px" @click="commentShow = true">
                        <div class="num" style="padding: 1px 3px" v-if="pageShows.includes('0')">{{ list.length }}</div>
                    </span>
                </div>
            </div>
            <div class="rightBox" @click="goodsShow = true">商品 {{ detailInfo.products.length }}</div>
        </div>
        <!-- 评论弹出层 -->
        <van-action-sheet v-model="commentShow" :title="`共条${list.length}评论`" style="max-height: 12rem" safe-area-inset-bottom>
            <div class="p-1 overflow-y bg-f8" style="min-height: 6rem; max-height: 8rem">
                <van-list
                    v-if="paging.tab"
                    v-model="paging.loading"
                    :finished="paging.finished"
                    :immediate-check="false"
                    finished-text="没有更多了"
                    @load="loadMore"
                >
                    <div class="d-flex mb-2" v-for="(item, index) in list" :key="index">
                        <div class="overflow-h rounded-circle mx-1" style="width: 35px; height: 35px">
                            <img :src="$imgUrlHead + item.userImage" class="w-100 h-100" />
                        </div>
                        <div style="width: 80%">
                            <div class="font-14 text-666 line-clamp1" style="width: 140px">{{ item.userNickName }}</div>
                            <div class="font text-999 mt-02 d-flex j-sb">
                                <div>{{ item.createTime | dateformat() }}</div>
                                <div v-if="item.personal" class="text-999 font" @click.stop="delComment(item.id)">删除</div>
                            </div>
                            <div class="font-14 text-333 mt-1">
                                {{ item.commentConent }}
                            </div>
                        </div>
                    </div>
                </van-list>
                <Noempty v-if="paging.emptylist || paging.error" :pic="require('@/assets/images/order-empty.png')" :title="'暂无评论信息'" />
            </div>
            <div class="w-100 p-1 d-flex j-sa bg-white">
                <header class="position-relative zindex-1 search d-flex a-center">
                    <div class="header-box">
                        <div class="header-search" style="margin: 7px 10px">
                            <input
                                class="ser-input"
                                v-model="commentConent"
                                maxlength="100"
                                type="text"
                                placeholder="写写你的看法吧（最多500个字）"
                            />
                            <span class="icon iconfont iconbianji"></span>
                        </div>
                    </div>
                    <div class="buttonBox" :class="{ 'bg-main': commentConent }" @click="addComment">发送</div>
                </header>
            </div>
        </van-action-sheet>

        <!-- 商品弹出层 -->
        <van-action-sheet
            v-model="goodsShow"
            :title="'商品' + `（${detailInfo.products.length}）`"
            class="overflow-h zindex-9999"
            style="max-height: 12rem"
            safe-area-inset-bottom
        >
            <div class="p-1 overflow-y" style="min-height: 6rem; max-height: 2; margin-bottom: 0.5rem">
                <template v-if="detailInfo.products && detailInfo.products.length > 0">
                    <div
                        class="bg-f5 d-flex rounded-12 p-1 mb-2"
                        v-for="(item, index) in detailInfo.products"
                        :key="index"
                        @click="goGoodsDetail(item.prodId)"
                    >
                        <div class="imgBox">
                            <legend-image :pic="item.pic" :isJD="item.prodSource == 'JD'" class="w-100 h-100" />
                            <!-- <img src="@/assets/images/haitao-small.png" class="haitao" /> -->
                        </div>
                        <div class="d-flex flex-column j-sb ml-1" style="width: 70%">
                            <div class="text-333 font-14">{{ item.name }}</div>
                            <div class="d-flex">
                                <div class="text-main">
                                    <span class="font">￥</span>
                                    <span class="font-18">{{ item.price }}</span>
                                </div>
                                <div
                                    class="font text-white px-1 ml-1 bg-main"
                                    style="line-height: 24px; border-radius: 2px"
                                    v-if="detailInfo.shareSaleUser && item.supportDist && detailInfo.shareSaleFlagSetting"
                                >
                                    预计佣金￥{{ item.distCommission }}
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
                <Noempty v-else :pic="require('@/assets/images/empty-bg.png')" :title="'暂无商品信息'" />
            </div>
        </van-action-sheet>
    </div>
</template>

<script>
import { contentCenterApi } from '@/api/contentCener'
import legendImage from 'components/legendImage/legendImage'
import Noempty from '@/components/Noempty/Noempty'
import PageUtil from '@/utils/PageUtil'
const list = new PageUtil(contentCenterApi.commentList)
import aplayer from 'vue-aplayer'

export default {
    name: '',
    components: {
        legendImage,
        Noempty,
        aplayer
    },
    data() {
        return {
            goodsShow: false,
            commentShow: false,
            commentConent: '',
            detailInfo: {
                products: []
            },
            thumbTotal: 0,
            list: [],
            paging: {
                tab: true,
                loading: false,
                finished: false,
                error: false, // 是否错误
                emptylist: false // 是否显示列表为空时的样式
            },
            ClickLike_Status: false,
            clickLikeSrc: require('@/assets/images/like-before.png'),
            // 点赞前的图片
            likeBeforeSrc: require('@/assets/images/like-before.png'),
            dzd_status: false, // 点赞状态, 如果没有点赞 false  点赞之后就是 true
            // 点赞后的图片
            likeAfterSrc: require('@/assets/images/like-after.png'),
            pageShows: [0,1,2,3,4,5], //(0 显示评论数 1 显示点赞数 2 显示浏览数 3 显示标签 4 显示作者 5 显示创建时间)
            audioSrc: '',
            audioObj: {
                title: '',
                artist: '',
                src: '',
                pic: '',
                lrc: ''
            },
            playerOptions: {
                playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
                autoplay: false, // 如果为true,浏览器准备好时开始回放。
                muted: false, // 默认情况下将会消除任何音频。
                loop: false, // 是否视频一结束就重新开始。
                preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                language: 'zh-CN',
                aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                sources: [
                    {
                        type: 'video/mp4', // 类型
                        src: '' // url地址
                    }
                ],
                poster: '', // 封面地址
                notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
                controlBar: {
                    timeDivider: true, // 当前时间和持续时间的分隔符
                    durationDisplay: true, // 显示持续时间
                    remainingTimeDisplay: false, // 是否显示剩余时间功能
                    fullscreenToggle: true // 是否显示全屏按钮
                }
            }
        }
    },
    computed: {},
    watch: {},
    created() {
		console.log(this.$route.query.pageShows)
        this.getDetail(this.$route.query.id)
    },
    destroyed() {},
    mounted() {},
    methods: {
        // 获取文章详情
        getDetail(id) {
            contentCenterApi.getDetail({ id }).then((res) => {
                if (!res.success) {
                    this.$toast(res.msg)
                    return
                }
                if (!res.result.products) {
                    res.result.products = []
                }
                this.detailInfo = res.result
				this.pageShows = res.result.pageShows || [0,1,2,3,4,5]  //为空时默认展示所有内容
                if (res.result.contentType == 'MUSIC') {
                    this.audioObj.src = this.$imgUrlHead + res.result.contentPath[0]
                    this.audioObj.title = res.result.title
                    this.audioObj.artist = res.result.author
                }
                list.loadListByPage(this, { articleId: res.result.id })
                this.getThumbTotal()
                this.getExist()
                document.title = res.result.title
            })
        },
        // 获取点赞数量
        getThumbTotal(id = this.$route.query.id) {
            contentCenterApi.thumbTotal({ articleId: id }).then((res) => {
                if (!res.success) {
                    this.$toast(res.msg)
                    return
                }
                this.thumbTotal = res.result
            })
        },
        // 获取是否点赞
        getExist(id = this.$route.query.id) {
            contentCenterApi.getExist({ articleId: id }).then((res) => {
                if (res.result) {
                    this.clickLikeSrc = this.likeAfterSrc
                    this.dzd_status = true
                } else {
                    this.clickLikeSrc = this.likeBeforeSrc
                    this.dzd_status = false
                }
            })
        },

        // 添加评论
        addComment() {
            if (!this.commentConent || this.commentConent.trim() == '') {
                this.$toast('评论不能为空')
                return
            }
            contentCenterApi.addComment({ articleId: this.$route.query.id, commentConent: this.commentConent }).then((res) => {
                if (!res.success) {
                    this.$toast(res.msg)
                    return
                }
                this.commentShow = false
                this.$toast('发布成功')
                list.loadListByPage(this, { articleId: this.detailInfo.id })
                this.commentConent = ''
            })
        },
        // 加载更多
        loadMore() {
            list.loadListByPageMore()
        },
        //更新点赞
        updataThumb() {
            this.$utils.uDebounce(() => {
				this.ClickLike()
				contentCenterApi.updataThumb({ articleId: this.$route.query.id }).then((res) => {
				    if (!res.success) {
				        this.$toast(res.msg)
				        return
				    }
				    this.getThumbTotal()
				})
			})
        },
        goGoodsDetail(id) {
            this.$router.push({
                name: 'goodsDetail',
                query: {
                    goodsInfoId: id
                }
            })
        },
        // 删除评论
        delComment(id) {
            this.$dialog
                .confirm({
                    title: '删除评论',
                    message: '删除评论后不可恢复，是否继续？'
                })
                .then(() => {
                    contentCenterApi.delComment({ articleId: this.$route.query.id, commentId: id }).then((res) => {
                        if (!res.success) {
                            this.$toast(res.msg)
                            return
                        }
                        this.$toast('删除成功')
                        list.loadListByPage(this, { articleId: this.detailInfo.id })
                    })
                })
        },
        ClickLike() {
            // 说明已经点赞了, 如果再次点击 就是取消点赞
            if (this.dzd_status) {
                this.clickLikeSrc = this.likeBeforeSrc
                this.dzd_status = false
                return
            }
            this.ClickLike_Status = true
            this.clickLikeSrc = this.likeAfterSrc

            setTimeout(() => {
                this.ClickLike_Status = false
                this.dzd_status = true
                this.$toast('点赞成功')
            }, 1000)
        }
    }
}
</script>

<style scoped>
.stickBox {
    width: 32px;
    height: 18px;
    border-radius: 2px;
    border: 1px solid #ee4133;
    font-size: 10px;
    color: #ee4133;
    line-height: 18px;
    margin-right: 10px;
    text-align: center;
}
.tagBox {
    padding: 1px;
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;
    margin-top: 10px;
}
.tagBox div {
    margin-right: 5px;
    width: 68px;
    height: 22px;
    line-height: 22px;
    background: #f5f5f5;
    border-radius: 2px;
    color: #333;
    text-align: center;
    border-radius: 2px;
    margin-bottom: 10px;
}
.titleBox {
    background: #f5f5f5;
    font-size: 14px;
    color: #333333;
    line-height: 20px;
    overflow: hidden;
    margin-top: 15px;
}
.imgBox {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 6px;
    overflow: hidden;
}
.haitao {
    width: 30px;
    position: absolute;
    top: 0;
    left: 0;
}
.footerBox {
    position: fixed;
    z-index: 999;
    padding: 20px 10px;
    width: 100%;
    max-width: 750px;
    display: flex;
    justify-content: space-between;
}
.leftBox {
    display: flex;
    justify-content: space-around;
    border-radius: 25px;
    height: 40px;
    padding: 7px;
    width: 110px;
    background-color: rgba(0, 0, 0, 0.5);
}
.leftBox .num {
    border-radius: 100%;
    position: absolute;
    font-size: 10px;
    background: var(--themescolor);
    padding: 1px 5px;
    top: -4px;
    left: 15px;
}
.rightBox {
    font-size: 16px;
    border-radius: 25px;
    text-align: center;
    color: #fff;
    height: 40px;
    background: var(--themescolor);
    width: 100px;
    line-height: 40px;
}
.search .icon {
    position: absolute;
    color: #999;
    left: 10px;
    top: 7px;
    display: block;
    width: 16px;
    height: 16px;
    background-size: 16px 16px;
}
.van-action-sheet__header {
    font-size: 12px;
    text-align: left;
    color: #999;
    padding-left: 25px;
}

.photoBox {
	position: relative;
	padding: 10px 0;
}

.videoBox {
    position: relative;
    padding: 10px;
    height: 183px;
}
.buttonBox {
    height: 24px;
    width: 50px;
    line-height: 24px;
    margin: 3px;
    background: #ccc;
    border-radius: 14px;
    font-size: 12px;
    color: #fff;
    text-align: center;
}
.rounded-circle {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
}
.van-dialog {
    z-index: 9999999;
}

.ClickLike-box {
    position: relative;
}
.ClickLike-box img {
    width: 24px;
    height: 24px;
    vertical-align: middle;
}
.ClickLike-box .animate {
    position: absolute;
    top: 3px;
    width: 20px;
    height: 20px;
    z-index: 100;
    animation: ClickLikeAni 1s ease-in-out;
    background: url('../../assets/images/like-after.png');
    background-size: cover;
}
@keyframes ClickLikeAni {
    0% {
        top: 0px;
    }
    10% {
        top: -3px;
    }
    20% {
        top: -6px;
    }
    30% {
        top: -9px;
    }
    40% {
        top: -12px;
        transform: rotate(6deg);
    }
    50% {
        top: -15px;
        transform: rotate(12deg);
    }
    60% {
        top: -18px;
        transform: rotate(6deg);
    }
    70% {
        top: -21px;
        transform: rotate(0deg);
    }
    80% {
        top: -24px;
        transform: rotate(-6deg);
    }
    90% {
        top: -27px;
        transform: rotate(-12deg);
    }
    100% {
        top: -30px;
        transform: rotate(-6deg);
    }
}

.richText >>> img {
    max-width: 100% !important;
    /* display: block; */
}
</style>
